<template>
    <div class="more">
        <div class="icon" :style="`--icon: url(${ base_url }/static/icon/player-btn.svg); --icon-size: 80%`"></div>
        <div class="icon" :style="`--icon: url(${ base_url }/static/icon/next-player-btn.svg); --icon-size: 80%`"></div>
        <div class="icon" :style="`--icon: url(${ base_url }/static/icon/more.svg); --icon-size: 100%`"></div>
    </div>
</template>

<script setup>
import { base_url } from '@/server/config';
</script>

<style scoped lang="less">
.more {
    box-sizing: border-box;
    width: 25vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 3vw;
    padding: 2vw;

    .icon {
        --size: 6vw;
        width: var(--size);
        height: var(--size);
    }
}
</style>